<!-- 查看表盘详情弹窗 DialDetailDialog -->
<template>
  <div>
    <el-dialog title="查看表盘详情" :visible.sync="dialDetailDialogShow" :before-close="handleClose" center width="60%">
      <el-descriptions border>
        <el-descriptions-item>
          <template slot="label">表盘名称(中文)</template>
          {{form.dialNameZh || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘名称(英文)</template>
          {{form.dialNameEn || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">显示名称(旧)</template>
          {{form.displayDialName || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘系列</template>
          <span v-if="form.dialSeries">{{form.dialSeries.dialSeriesName || ''}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘tag</template>
          <span v-if="form.dialManageTag">{{form.dialManageTag.nameZh}}({{form.dialManageTag.nameEn}})</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">关键字</template>
          {{form.keywordsStr || ''}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">文件类型</template>
          <span v-if="form.dialResFileType">{{form.dialResFileType.dialResFileName}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘类型</template>
          <span v-if="form.dialType">{{form.dialType.dialTypeName}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">屏幕形状</template>
          <span>{{ getShapeText(form.shape) }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘状态</template>
          <span v-if="form.onState == 0">创建</span>
          <span v-if="form.onState == 1">测试</span>
          <span v-if="form.onState == 2">通过</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">是否收费</template>
          <span v-if="form.onState == 0">免费</span>
          <span v-else>收费</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">价格(国内)</template>
          {{form.priceDomestic || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">价格(国外)</template>
          {{form.priceOverseas || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">分辨率</template>
          {{form.dpiWh || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">主控型号</template>
          {{form.mainControlModel || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">设计师(中)</template>
          {{form.designerZh || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">设计师(英)</template>
          {{form.designerEn || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">渠道</template>
          <span v-if="form.channel == 0">全部</span>
          <span v-if="form.channel == 1">国内</span>
          <span v-if="form.channel == 2">国外</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">虚拟下载数</template>
          {{form.virtuallyDwCount || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">预览图</template>
          <img v-if="form.newPreviewUrl" style="width: 120px;" :src="form.newPreviewUrl" alt="预览图">
          <img v-else style="width: 120px;"
               :src="'https://app.ss-tjd.com' + form.prepicUrl" alt="预览图">
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">资源文件</template>
          {{form.fileName || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘简介(中文)</template>
          {{form.dialDiscrZh || ''}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">表盘简介(英文)</template>
          {{form.dialDiscrEn || ''}}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {post} from '@/api/my_axios'

export default {
  name: '',
  // components: { UpLoads },
  props: {
    dialogVisible: Boolean, // 弹窗可见状态
    isEditMode: Boolean, // 是否是编辑模式
    // 是否是查看模式
    isViewMode: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 其他需要的属性
    dialDetailDialogShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    id: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      disabledOnState: true,
      formLabelWidth: '120px',
      devScrDpiData: [],
      devIcMcodeData: [],
      devScrShapeData: [], // 屏幕形状
      form: {
        keywordsCodes: []
      },
      prepicUrl: '',
      resUrl: '',
      resName: '',
      pageSize: 20,
      pageNum: 1,
      channelData: [
        { value: '0', label: '全部' },
        { value: '1', label: '国内' },
        { value: '2', label: '国外' }
      ]
    }
  },
  watch: {
    dialDetailDialogShow (vo) {
      if (vo) {
        this.getDialListData()
      }
    }
  },
  mounted () {
    this.getDictSortData()
    this.getDialSmallTagList()
    this.getDialSmallKeywordsList()
  },
  methods: {

    // 屏幕转化
    getShapeText (value) {
      const dto = this.devScrShapeData.find(v => v.value === value)
      return dto && dto ? dto.label : ''
    },

    async getDialListData () {
      this.dialDetailDialogShow = true
      const item = await post('/web/cms/dial/0.2/dial/mgr/getDialInfo', { dialId: this.id })
      this.form = item.data
      if (this.form.keywordsZh) {
        const zhList = this.form.keywordsZh.split(',')
        const enList = this.form.keywordsEn.split(',')
        const newList = []
        zhList.forEach((item, index) => {
          newList.push(`${item}(${enList[index]})`)
        })
        this.form.keywordsStr = newList.join(',')
      }
    },

    // 表盘tag
    getDialSmallTagList () {
      const { queryParam, pageSize, pageNum } = this
      this.$store.dispatch('getDialSmallTagList', { queryParam, status: '1', pageSize, pageNum })
    },

    // 表盘关键字
    getDialSmallKeywordsList () {
      const { queryParam, pageSize, pageNum } = this
      this.$store.dispatch('getDialKeyWordsList', { queryParam, status: '1', pageSize, pageNum })
    },

    // 数据字典配置分类项获取
    getDictSortData () {
      // 主控型号
      this.$store.dispatch('getSysDictItemList', 'devIcMcode').then(res => {
        const currentDevic = res.filter(item => {
          return item.value === this.form.mainControlModel
        })
        if (currentDevic[0]) this.form.mainControlModel_name = currentDevic[0].label
        this.devIcMcodeData = res
      })

      // 屏幕形状
      this.$store.dispatch('getSysDictItemList', 'devScrShape').then(res => {
        this.devScrShapeData = res
      })
    },

    handleClose () {
      this.form = {}
      this.$emit('isDev', 'no')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
